import 'package:flutter/material.dart';

class ChipDemo extends StatefulWidget {
  ChipDemo({Key key}) : super(key: key);

  @override
  _ChipDemoState createState() => _ChipDemoState();
}

class _ChipDemoState extends State<ChipDemo> {
  List<String> _tags = [
    '水果',
    '香蕉',
    '柠檬',
    '苹果'
  ];

  String _selectChip = 'Nothing';

  List<String> _selected = [];
  String _choise = '柠檬';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ChipDemo'),
        elevation: 0.0,
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Wrap(
            alignment: WrapAlignment.center,
            runAlignment: WrapAlignment.start,
            spacing: 8.0,
            runSpacing: 8.0,
            children: <Widget>[
              Chip(
                label: Text('Life')
              ),
              Chip(
                label: Text('Sunset'),
                backgroundColor: Colors.orange,
              ),
              Chip(
                label: Text('wangxh'),
                avatar: CircleAvatar(
                  backgroundColor: Colors.green,
                  child: Text('浩'),
                ),
              ),
              Chip(
                label: Text('wangxh'),
                avatar: CircleAvatar(
                  backgroundImage: NetworkImage(
                    'https://image.ghub.cn/prd%2Fstatic%2F2020-10-03%2Fiphone11.jpg',
                  ),
                ),
                onDeleted: (){

                },
                deleteIcon: Icon(Icons.delete),
                deleteIconColor: Colors.redAccent,
                deleteButtonTooltipMessage: 'Remove this tag',
              ),
              Chip(
                label: Text('wangxh'),
                avatar: CircleAvatar(
                  backgroundImage: NetworkImage(
                    'https://image.ghub.cn/prd%2Fstatic%2F2020-10-03%2Fiphone11.jpg',
                  ),
                ),
                onDeleted: (){
                  
                },
              ),
              Divider(
                color: Colors.grey,
                height: 32.0,
                indent: 20.0,
              )
            ],
          ),
          Wrap(
            alignment: WrapAlignment.center,
            spacing: 8.0,
            runSpacing: 8.0,
            children: _tags.map((String tag){
              return Chip(
                label: Text(tag),
                onDeleted: (){
                  setState(() {
                    _tags.remove(tag);
                  });
                },
              );
            }).toList()
          ),
          Divider(
            color: Colors.grey,
            height: 32.0,
          ),
          Container(
            child: Text('your select is: $_selectChip'),
          ),
          Wrap(
            spacing: 8.0,
            children: _tags.map((String text){
              return ActionChip(
                label: Text(text), 
                onPressed: (){
                  setState(() {
                    _selectChip = text;
                  });
                }
              );
            }).toList()
          ),
          Divider(
            color: Colors.grey,
            height: 32.0,
          ),
          Container(
            child: Text('your select is: ${_selected.toString()}'),
          ),
          Wrap(
            spacing: 8.0,
            children: _tags.map((String text){
              return FilterChip(
                label: Text(text), 
                selected: _selected.contains(text),
                onSelected: (value){
                  setState(() {
                    if (_selected.contains(text)) {
                      _selected.remove(text);
                    } else {
                      _selected.add(text);
                    }
                  });
                }
              );
            }).toList()
          ),
          Divider(
            color: Colors.grey,
            height: 32.0,
          ),
          Container(
            child: Text('your select is: $_choise'),
          ),
          Wrap(
            spacing: 8.0,
            children: _tags.map((String text){
              return ChoiceChip(
                label: Text(text), 
                selected: _choise==text,
                selectedColor: Colors.black,
                labelStyle: TextStyle(
                  fontSize: 16.0,
                  color: _choise==text?Colors.red:Colors.white
                ),
                onSelected: (value){
                  setState(() {
                    _choise = text;
                  });
                }
              );
            }).toList()
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.restore),
        onPressed: (){
          setState(() {
            _tags = [
              '水果',
              '香蕉',
              '柠檬',
              '苹果'
            ];
            _selected = [];
            _choise = '柠檬';
          });
        },
      ),
    );
  }
}